<template>
  <a
    :style="{
      backgroundImage: `url(${publicUrls + 'free/style10/free10unitdigitalShowroom1two.png?imageView2/format/webp'})`,
    }"
    :href="props.url"
    v-if="store.isMobileType"
    class="unitdigitalShowroom-box"
  >
    <i class="freeIcon">&#xe63a;</i>
  </a>
  <!-- <t-tooltip
    :visible="true"
    :attach="'#edit-box' + commonStore.templateId"
    content="查看本单元全景展厅"
    placement="bottom"
    v-else
  > -->
  <div class="tooltip-box" v-else>
    <div class="tooltip-conetnt">
      <div class="popup__arrow-parent">
        <div class="t-popup__arrow"></div>
      </div>
      <span>查看本单元全景展厅</span>
    </div>
    <a
      ref="myunitdigitalShowroom"
      :style="{
        backgroundImage: `url(${publicUrls + 'free/style10/free10unitdigitalShowroom1two.png?imageView2/format/webp'})`,
      }"
      class="unitdigitalShowroom-box"
      :href="props.url"
      target="blank"
    >
      <i class="freeIcon">&#xe63a;</i>
    </a>
  </div>
  <!-- </t-tooltip> -->
</template>      

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { publicUrls } from '@/utils/minxin';
import { useProjectStore, commonDataStore } from '@/store';
const commonStore = commonDataStore();
import { ref } from 'vue';
const store = useProjectStore();
const myunitdigitalShowroom = ref();
const props = defineProps({
  url: {
    type: String,
  },
  id: {
    type: String || Number,
  },
});
</script>  
 
<style lang="less" scoped>
.unitdigitalShowroom-box {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  width: 51px;
  height: 66px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .freeIcon {
    position: relative;
    z-index: 10;
    font-size: 24px;
    line-height: 24px;
    // color: rgba(180, 170, 152, 1);
    color: #1c1d22;

    animation: breathe 2s ease-in-out infinite; /* 应用动画 */
    margin-bottom: 8px;
    margin-right: 4px;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.9; /* 动画开始和结束时的不透明度 */
    transform: scale(1.1);
  }
  50% {
    opacity: 1; /* 动画中间点的不透明度 */
    //  transform: scale(5);
    transform: scale(1);
  }
}
.tooltip-box {
  position: relative;
  width: 32px;
  height: 44px;
}
.popup__arrow-parent {
  position: relative;
  width: 100%;
  height: 0px;
}
.tooltip-conetnt {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  position: absolute;
  left: calc(50% + 8px);
  bottom: -52px;
  transform: translateX(-50%);
  width: 145px;
  height: 24px;
  margin: 2px 0;
  background: rgba(91, 91, 91, 1);
  // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);

  border-radius: 4px;
  span {
    font-family: Microsoft YaHei;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #fff;
    margin-top: 2px;
  }
  :deep(.t-popup__arrow) {
    top: -3px;
    left: 68.5px;
    // background: rgba(147, 178, 170, 1);
    border-color: rgba(91, 91, 91, 1);
  }
  :deep(.tooltip-conetnt .t-popup__arrow::before) {
    box-shadow: none;
  }
  .t-popup__arrow::before {
    background: rgba(91, 91, 91, 1);
    // box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  }
}
.tooltip-box:hover {
  .tooltip-conetnt {
    opacity: 1;
  }
}
</style>